<script>
  import events from './events'
  export default {
    name: 'MultiTab',
    data () {
      return {
        fullPathList: [],
        pages: [],
        activeKey: '',
        newTabIndex: 0
      }
    },
    created () {
      // bind event
      events.$on('open', val => {
        if (!val) {
          throw new Error(`multi-tab: open tab ${val} err`)
        }
        this.activeKey = val
      }).$on('close', val => {
        if (!val) {
          this.closeThat(this.activeKey)
          return
        }
        this.closeThat(val)
      }).$on('rename', ({ key, name }) => {
        console.log('rename', key, name)
        try {
          const item = this.pages.find(item => item.path === key)
          item.meta.customTitle = name
          this.$forceUpdate()
        } catch (e) {
        }
      })
      this.pages.push(this.$route)
      this.fullPathList.push(this.$route.fullPath)
      this.selectedLastPath()
    },
    methods: {
      onEdit (targetKey, action) {
        this[action](targetKey)
      },
      remove (targetKey) {
        this.pages = this.pages.filter(page => page.fullPath !== targetKey)
        this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
        // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
        if (!this.fullPathList.includes(this.activeKey)) {
          this.selectedLastPath()
        }
      },
      selectedLastPath () {
        this.activeKey = this.fullPathList[this.fullPathList.length - 1]
      },

      // content menu
      closeThat (e) {
        // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
        if (this.fullPathList.length > 1) {
          this.remove(e)
        } else {
          this.$message.info('这是最后一个标签了, 无法被关闭')
        }
      },
      closeLeft (e) {
        const currentIndex = this.fullPathList.indexOf(e)
        if (currentIndex > 0) {
          this.fullPathList.forEach((item, index) => {
            if (index < currentIndex) {
              this.remove(item)
            }
          })
        } else {
          this.$message.info('左侧没有标签')
        }
      },
      closeRight (e) {
        const currentIndex = this.fullPathList.indexOf(e)
        if (currentIndex < (this.fullPathList.length - 1)) {
          this.fullPathList.forEach((item, index) => {
            if (index > currentIndex) {
              this.remove(item)
            }
          })
        } else {
          this.$message.info('右侧没有标签')
        }
      },
      closeAll (e) {
        const currentIndex = this.fullPathList.indexOf(e)
        this.fullPathList.forEach((item, index) => {
          if (index !== currentIndex) {
            this.remove(item)
          }
        })
      },
      closeMenuClick (key, route) {
        this[key](route)
      },
      renderTabPaneMenu (e) {
        return (
          <a-menu {...{
            on: {
              click: ({ key, item, domEvent }) => {
                this.closeMenuClick(key, e)
              }
            }
          }}>
            <a-menu-item key="closeThat">关闭当前标签</a-menu-item>
            <a-menu-item key="closeRight">关闭右侧</a-menu-item>
            <a-menu-item key="closeLeft">关闭左侧</a-menu-item>
            <a-menu-item key="closeAll">关闭全部</a-menu-item>
          </a-menu>
        )
      },
      // render
      renderTabPane (title, keyPath) {
        const menu = this.renderTabPaneMenu(keyPath)

        return (
          <a-dropdown overlay={menu} trigger={['contextmenu']}>
            <span style={{ userSelect: 'none' }}>{title}</span>
          </a-dropdown>
        )
      }
    },
    watch: {
      '$route': function (newVal) {
        this.activeKey = newVal.fullPath
        if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
          this.fullPathList.push(newVal.fullPath)
          this.pages.push(newVal)
        }
      },
      activeKey: function (newPathKey) {
        this.$router.push({ path: newPathKey })
      }
    },
    render () {
      const { onEdit, $data: { pages } } = this
      const panes = pages.map(page => {
        return (
          <a-tab-pane
            style={{ height: 0 }}
            tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
            key={page.fullPath} closable={page.meta.closable}
          >
          </a-tab-pane>)
      })

      return (
        <div class="ant-pro-multi-tab">
          <div class="ant-pro-multi-tab-wrapper">
            <a-tabs
              hideAdd
              type={'editable-card'}
              v-model={this.activeKey}
              tabBarStyle={{ background: '#FFF', margin: 0, marginBottom: '15px', paddingLeft: '30px', paddingTop: '1px' }}
              {...{ on: { edit: onEdit } }}>
              {panes}
            </a-tabs>
          </div>
        </div>
      )
    }
  }
</script>
